<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
<div id="root">

</div>
<div class="demo">

</div>
</body>
<script src="js/old/babel.min.js"></script>
<script src="js/old/react.development.js"></script>
<script src="js/old/react-dom.development.js"></script>
<script type="text/babel">
  // jsx 语法创建虚拟dom
  const vdom = (
    <div title="标题">
      <h1>Hello, world!</h1>
    </div>
  )
  ReactDOM.render(vdom, document.querySelector('#root'))

  // React 标准api创建虚拟dom(不常用)
  const vdom2 = React.createElement('div', {title: '标题2'},
          React.createElement('h1', null, 'Hello, world!'))
  ReactDOM.render(vdom2, document.querySelector('.demo'))

  // 真实dom, 虚拟dom对比, 虚拟dom更轻量
  const rdom = document.getElementById('root')
  const rdom2 = document.querySelector('.demo')
  console.log(typeof vdom, typeof vdom2, vdom, vdom2)
  console.log(typeof rdom, typeof rdom2, rdom, rdom2)
</script>
</html>